<template>
  <div class="order">
    <el-tabs>
      <el-tab-pane label="点餐">
        <el-table border :data="tableData">
          <el-table-column prop="goodsName" label="商品名称"></el-table-column>
          <el-table-column prop="count" label="数量"></el-table-column>
          <el-table-column prop="price" label="金额"></el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="deleteOrder(scope.row)" size="small">删除</el-button>
              <el-button type="text" @click="addOrder(scope.row)" size="small">增加</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          数量：{{totalCount}}
          总价：{{totalPrice}}
        </div>
        <div class="button-area">
          <el-button type="danger" @click="deleteAll">删除</el-button>
          <el-button type="success" @click="payAll">结账</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="挂单"></el-tab-pane>
      <el-tab-pane label="外卖"></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  mounted () {
  },
  props: {
    tableData: Array,
    totalCount: Number,
    totalPrice: Number
  },
  methods: {
    addOrder (good) {
      this.$emit('add', good)
    },
    deleteOrder (good) {
      this.$emit('delete', good)
    },
    deleteAll () {
      this.$emit('deleteAll')
    },
    payAll () {
      this.$emit('payAll')
    }
  }
}
</script>
<style scoped>
.order{
  padding: 0 13px;
}
.button-area{
  margin-top: 15px;
}
</style>


